<div id="app" v-cloak>
    <div class="padding10">
        <el-button @click="handleAddGroup">添加分组</el-button>
    </div>
    <div class="padding10">
        <el-tabs
                v-model="groupAction"
                type="card"
                class="demo-tabs"
                @tab-remove="removeTab"
        >
            <el-tab-pane
                    v-for="item in groupList"
                    :key="item.key"
                    :label="item.title+`[`+item.key+`]`"
                    :closable="item.key!=`basic`"
                    :name="item.key"
            >
                <div class="padding20">
                    <el-form label-width="auto" style="max-width: 700px">
                        <el-form-item v-for="items in list[item.key]" :label="items.title">
                            <div class="flex-row">
                                <mu-form v-model="items.value" :input-type="items.type" :options="items.content" label-field="label" value-field="value" width="400px" :placeholder="`请输入`+items.title"></mu-form>
                                <div class="flex-row flex-item-center">
                                    <el-button class="margin10" size="small"  type="danger" @click="removeConfig(items)">
                                        <el-icon><Delete /></el-icon>
                                    </el-button>
                                    <span style="margin-left: 5px">键名：{{items.name}}</span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addConfig(item)">添加配置</el-button>
                            <el-button type="danger" @click="saveConfig(item)">确认修改</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-tab-pane>
        </el-tabs>
    </div>
</div>